.tooltip.tour {
	background-color: $tour;
}
.tooltip.tour[x-placement^="left"] .tooltip-arrow {
    border-left-color: $tour;
}
.tooltip.tour[x-placement^="top"] .tooltip-arrow {
    border-top-color: $tour;
}
.tooltip.tour[x-placement^="bottom"] .tooltip-arrow {
    border-bottom-color: $tour;
}
.tooltip.tour[x-placement^="right"] .tooltip-arrow {
    border-right-color: $tour;
}

.appConfigBody-tourActive {
	.sidebarApp-link[href='/labels'] { overflow: visible }
}

#pm_wizard {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999;
	box-shadow: 0 -1rem 1rem rgba(0,0,0,.1);
	width: 100%;
	background: $white;
	padding: 2rem 14rem 2rem 8rem;

	[class^="step-"] {display: none}

	.close {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 1rem;
		background: inherit;
		border: 0;
		line-height: 2rem;
		cursor: pointer;
		color: $primary;
		text-decoration: none;
		font-size: .8em;
	}
	.badge {
		font-size: 2rem;
		color: $default-color-light;
		border: 1px solid $border;
		border-radius: 4rem;
		text-align: center;
		line-height: 4rem;
		width: 4rem;
		display: block;
		height: 4rem;
		position: absolute;
		left: 2rem;
		font-weight: normal;
		top: 3rem;
	}
	.navigation {
		position: absolute;
		right: 2rem;
		top: 3.5rem;
		width: 10rem;
		display: block;
		text-align: center;
		.next {}
		.pagination {
			display: block;
			list-style-type: none;
			margin: 0;
			padding: 1rem 0;
			text-align: center;
			li {
				display: inline-block;
				list-style-type: none;
				margin: 0 1px;
				padding: 0;
				height: 12px;
				width: 12px;
				border-radius: 12px;

			}

			a {
				display: block;
				list-style-type: none;
				margin: 0;
				padding: 0;
				height: 12px;
				width: 12px;
				border-radius: 12px;
				background-color: $border;
			}
		}
	}
	[class^="step-"] {
		.title {}
		.body {
			strong {
				color: $tour;
			}
		}
	}
}


#pm_wizard.wizardStep-1 .step-1 {display: block}
#pm_wizard.wizardStep-2 .step-2 {display: block}
#pm_wizard.wizardStep-3 .step-3 {display: block}
#pm_wizard.wizardStep-4 .step-4 {display: block}

#pm_wizard.wizardStep-1 .pagination .pagination-step-1 a {background-color: $primary}
#pm_wizard.wizardStep-2 .pagination .pagination-step-2 a {background-color: $primary}
#pm_wizard.wizardStep-3 .pagination .pagination-step-3 a {background-color: $primary}
#pm_wizard.wizardStep-4 .pagination .pagination-step-4 a {background-color: $primary}

.wizardStep-hidden {display: none}

#welcomeModal {
	.pm_form {
		width: 80%;
		margin: auto;
	}
}

.monetize {
	.modal-dialog .modal-content {
		.upsell {
			position: relative;
			height: 18rem;
			float: left;
			width: 100%;
			h3, h4, ul {
				display: block;
				position: relative;
				z-index: 8;
			}
			h4 {
				color: $primary;
				font-weight: 700;
				font-size: 1.2rem;
				padding: 2rem 1rem 0 2rem;
				span {
					font-weight: normal;
				}
			}
			ul {
				color: $white;
				padding: 0 3rem;
			}
			button {
				position: relative;
				z-index: 5;
				left: 3rem;
			}
			& > a {
				position: absolute;
				right: 0;
				top: 3rem;
			}
		}
	}
}
